<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="photos/UncleKevin icon.png">
    <title>UncleKevin 商品详情</title>
    <link rel="stylesheet" href="css/4-商品详情.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="top">
        <div class="container">
            <ul class="top-left">
                <div class="download"><li style="color: #99999962;"><a href="">客户端下载&nbsp;</a></li></div>
                <div class="log-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html">登录</a></li></div>
                <div class="sign-in" onclick="window.open('/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html','_self')"><li><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/2-注册.html" style="color:#f26704;">注册</a></li></div>
                <script>
                    $(".log-in").hover(
                        function(){
                        $(".log-in a").css({"margin-left":"40px",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".log-in a").css({"font-weight":"normal",
                                            "margin-left":"24px",});
                        }
                    );
                    $(".sign-in").hover(
                        function(){
                        $(".sign-in a").css({"font-weight":"bold",
                                            "margin-left":"38px"});
                        },
                        function(){
                        $(".sign-in a").css({"font-weight":"normal",
                                            "margin-left":"24px"});
                        }
                    );
                    $(".download").hover(
                        function(){
                        $(".download a").css({"color":"#f26704",
                                            "font-weight":"bold"});
                        },
                        function(){
                        $(".download a").css({"font-weight":"normal",
                                            "color":"#888888",});
                        }
                    );
                </script>
            </ul>
            <ul class="top-right">
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/10-我的订单.html">我的订单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/5-购物车.html">购物车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li style="color: #99999962;"><a href="">收藏夹&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><h style="margin-top: 1px;float: right;">|</h></li>
                <li><a href="">联系客服</a></li>
            </ul>
        </div>
    </div>
    <div class="top-Menu">
        <div class="container">
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/1-首页.html"><img class="logo1" src="https://i.loli.net/2021/01/31/VlOCJo75ZI61uYd.png"></a>
            <div class="input-group">
                <input type="text" class="search-bar" placeholder="&nbsp;搜索商品/类别/店铺">
                <script>
                    // 当搜索框得到焦点时，边框加粗
                    $(".search-bar").focus(function(){
                        $(".search-bar").css("border-width","3px");
                    });
                    // 当搜索框得到焦点时，添加阴影效果
                    $(".search-bar").focus(function(){
                        $(".search-bar").css("box-shadow","8px 8px 16px 0 #f2670434, 8px 6px 10px 0px #f2670442");
                    });
                    // 当搜索框失去焦点时，边框还原
                    $(".search-bar").blur(function(){
                        $(".search-bar").css("border-width","2px");
                    });
                    // 当搜索框失去焦点时，阴影效果还原
                    $(".search-bar").blur(function(){
                        $(".search-bar").css("box-shadow","none");
                    });
                </script>
                <span class="input-group-btn">
                    <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/3-搜索页.html"><button class="btn btn-default btn-search" type="button">搜索</button></a> 
                </span>
            </div>
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/5-购物车.html"><img class="shopping-car" src="https://i.loli.net/2021/01/31/u9Zo5zvIFxqDVTl.png" title="我的购物车"></a>
        </div>
    </div>
    <div class="container">
        <div class="box">
            <ul class="image">
                <li><img src="https://i.loli.net/2021/02/18/ByLGs3trjvqXdDN.jpg"/></li>
                <li><img src="https://i.loli.net/2021/02/18/TGevydEah3Ioql4.jpg"/></li>
            </ul>
            <ul class="num">
                <li class='current'></li>
                <li></li>
            </ul>
            <div class="left arrow"><span>‹</span></div>
            <div class="right arrow"><span>›</span></div>
        </div>
        <script type="text/javascript">
            var i=0,timer;
            var sum = $(".image li").length;
            $(function(){
                $(".image li").eq(0).show();
                
                $(".box").hover(function(){
                    $(".arrow").show();
                    clearInterval(timer);
                },function(){
                    $(".arrow").hide();
                    iLunbo();
                })
                iLunbo();
                
                $(".arrow").hover(function(){
                    clearInterval(timer);
                });
                /*左箭头控制轮播*/
                $(".left").click(function(){
                    clearInterval(timer);
                    if(i==0){
                        i=sum;
                    }
                    i--;
                    startLunbo();
                    iLunbo();
                });
                
                /*右箭头控制轮播*/
                $(".right").click(function(){
                    clearInterval(timer);
                    if(i==sum-1){
                        i=-1;
                    }
                    i++;
                    startLunbo();
                    iLunbo();
                });
                
                /*提示信息变换*/
                $(".num>li").hover(function(){
                    clearInterval(timer);
                    i=$(this).index();
                    console.log(i);
                    startLunbo();
                });
            });
            
                /*自动轮播*/
                function iLunbo(){
                    timer = setInterval(function(){
                        i++;
                        if(i==sum-1){
                            i=-1;
                        }
                        startLunbo();
                    },2000)
                }
                
                /*图片轮播和提示信息*/
                function startLunbo(){
                    if(i==6){
                        i=0;
                    }
                    $(".image>li").eq(i).fadeIn().siblings().fadeOut();
                    $(".num>li").eq(i).addClass("current").siblings().removeClass("current");
                }
        </script>
        <div class="main-right">
            <h2>小米11</h2>
            <p>骁龙888｜2K AMOLED 四曲面柔性屏｜1亿像素三摄｜时尚轻薄机身｜55W 有线闪充｜50W 无线闪充｜10W 无线反充｜LPDDR5｜WiFi6（增强版)｜ 视频「超级夜景」｜哈曼卡顿音频认证｜立体声双扬声器</p>
            <span>4299 元</span>
            <div class="info1">选择版本</div>
            <ul class="info1-ul">
                <a href=""><li style="border: #f24f04 solid 1px;"><h style="color: #f24f04;">8GB+128GB</h></li></a>
                <a href=""><li style="margin-left: 273px;margin-top: -42px;"><h>8GB+256GB</h></li></a>
                <a href=""><li class="active1" style="margin-top: 13px;"><h style="margin-left: 79px;">12GB+256GB</h></li></a>
            </ul>
            <div class="info2">选择颜色</div>
            <ul class="info2-ul">
                <a href=""><li style="border: #f24f04 solid 1px;"><h style="color: #f24f04;margin-left: 115px;">白色</h></li></a>
                <a href=""><li style="margin-left: 273px;margin-top: -42px;"><h style="margin-left: 118px;">蓝色</h></li></a>
                <a href=""><li class="active1" style="margin-top: 13px;"><h style="margin-left: 90px;">烟紫（素皮）</h></li></a>
                <a href=""><li class="active1" style="margin-top: -42px;margin-left: 273px;"><h style="margin-left: 90px;">卡其（素皮）</h></li></a>
            </ul>
            <div class="info3">选择套装</div>
            <ul class="info3-ul">
                <a href=""><li style="border: #f24f04 solid 1px;"><h style="color: #f24f04;margin-left: 106px;">标准版</h></li></a>
                <a href=""><li style="margin-left: 273px;margin-top: -42px;"><h style="margin-left: 70px;">套装版（赠充电器）</h></li></a>
            </ul>
            <a href="/Users/kevinwu_21/Desktop/HTML5/2021寒假前端作业/6-确认订单.html"><div class="verify">立即购买</div></a>
        </div>
    </div>
    <div class="container">
        <div class="info-left">
            <img src="https://img.imgdb.cn/item/602e9626e7e43a13c6101988.jpg" alt="">
            <img style="max-width: 180px; margin-left: 35px;" src="https://img.imgdb.cn/item/602e9647e7e43a13c610275e.jpg" alt="">
        </div>
        <div class="info-image">
            <img src="https://i.loli.net/2021/02/18/bPYAs4QCyJuxvEB.jpg" alt="">
            <img style="margin-top: -10px;" src="https://i.loli.net/2021/02/18/SiYZptonVAcha1f.jpg" alt="">
            <img style="margin-top: -10px;" src="https://i.loli.net/2021/02/18/Fz7i5aQXRBw3bG2.jpg" alt="">
            <img style="margin-top: -10px;" src="https://i.loli.net/2021/02/18/2tEyrTwL13qISzO.jpg" alt="">
            <img style="margin-top: -10px;" src="https://i.loli.net/2021/02/18/6OmqJDLSYbgHU3n.jpg" alt="">
            <img style="margin-top: -10px;" src="https://i.loli.net/2021/02/18/Tpd2EXxki5jLOSe.jpg" alt="">
            <img style="margin-top: -10px;" src="https://i.loli.net/2021/02/18/pXjxWgOws2Q4aAq.jpg" alt="">
        </div>
    </div>
</body>
</html>